<template>
  <div>
    <!-- <HelloWorldVue :msg="msg" @hello="onSayHello"/> -->
    <!-- <LifeCycleVue :msg="msg" v-if="showSon"/> -->
    <!-- <RefVue /> -->
    <!-- <ToRefsVue/> -->
    <!-- <ComputedVue /> -->
    <!-- <HookVue v-if="showSon"/> -->
    <ScriptSetupVue v-if="showSon"/>
    <hr>
    <hr>

    <button @click="msg=''+new Date()">修改msg</button>
    <button @click="showSon=!showSon">显隐子组件</button>
  </div>
</template>

<script>
import ComputedVue from './components/Computed.vue';
import HelloWorldVue from './components/HelloWorld.vue';
import HookVue from './components/Hook.vue';
import LifeCycleVue from './components/LifeCycle.vue';
import RefVue from './components/Ref.vue';
import ScriptSetupVue from './components/ScriptSetup.vue';
import ToRefsVue from './components/ToRefs.vue';

export default {

  /* 声明子组件 */
  components:{
    HelloWorldVue,
    LifeCycleVue,
    RefVue,
    ToRefsVue,
    ComputedVue,
    HookVue,
    ScriptSetupVue
  },

  data(){
    return {
      msg:"from App",
      showSon: true
    }
  },

  methods:{
    onSayHello(arg){
      console.log("App onSayHello",arg);
    }
  }
}
</script>